<template>
	<view>
		<u-navbar :title="title1" :autoBack="true" placeholder></u-navbar>
		<view class="con">
			<image :src="URL('/uploads/20250317/b5ebaf77d1fd92c8cfc69be234b2e051.png')" mode=""
				style="width: 750rpx;height: 173.21rpx;"></image>
			<view class="con__box">
				<view class="con__box__b">
					<view class="con__box__b__item" v-for="(item,index) in list" :key="index">
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="u-flex u-flex-y-center">
								<view class="con__box__b__item__index">
									<image v-if="index<3" :src="'/static/home/i'+(index+1)+'.png'" class="con__box__b__item__indexicon" mode="">
									</image>
									<view class="con__box__b__item__indexnum" v-else>
										{{index+1}}
									</view>
								</view>
								<image src="" class="con__box__b__item__tx" mode="aspectFill"></image>
								<view class="con__box__b__item__username u-line-1">
									神秘同学873219077
								</view>
							</view>
							<view class="con__box__b__item__time">
								14小时前
							</view>
						</view>
						<view class="con__box__b__item__title">
							捞一个帅哥
						</view>
						<view class="con__box__b__item__text u-line-3">
							今天在食堂看到了一个很喜欢的男生，温文尔雅 超有气质，重点是他身上超级香! 回宿舍后满脑 子都是他。打听了一下应该是电科alsdkksdkjlskajdlask
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap"
							:class="item.pics.length%3==0?'u-flex-between':''">
							<image src="" :class="item.pics.length%3==0?'con__box__b__item__pic1':''"
								class="con__box__b__item__pic" v-for="(item1,index1) in item.pics" mode="aspectFill"
								:key="index1"></image>
						</view>
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="con__box__b__item__ht">
								<image src="/static/home/ht1.png" class="con__box__b__item__ht__icon" mode=""></image>
								表白寻人
							</view>
							<view class="u-flex u-flex-y-center">
								<view class="con__box__b__item__tip">
									点赞 2
								</view>
								<view class="con__box__b__item__tip">
									评论 16
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="position: fixed;bottom: 0;left: 0;">
				<u-safe-bottom></u-safe-bottom>
			</view>
		</view>
		<wanshan ref="wanshan"></wanshan>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						pics: ['', '', ''],
						isdz: false
					},
					{
						pics: [],
						isdz: true
					},
					{
						pics: ['', '', '', ''],
						isdz: false
					},
					{
						pics: ['', '', '', '', ''],
						isdz: false
					},
					{
						pics: ['', '', '', '', '', ''],
						isdz: false
					},
					{
						pics: [],
						isdz: true
					},
					{
						pics: [],
						isdz: true
					},
					{
						pics: [],
						isdz: true
					},
					{
						pics: [],
						isdz: true
					},
					{
						pics: [],
						isdz: true
					},
					
				]
			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ee8d6a;
	}

	.con {
		&__box {
			padding: 0 27rpx calc(env(safe-area-inset-bottom) + 10rpx);

			&__b {
				background-color: #fff;
				border-radius: 18rpx;
				padding: 0 34rpx;

				&__item {
					padding: 32rpx 0 26rpx;
					border-bottom: 1rpx solid #F7F7F7;

					&__index {
						width: 80rpx;
					}
					&__indexnum{
						width: 40rpx;
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						color: #fff;
						background-color: #cdcdcd;
						font-size: 24rpx;
					}
					&__indexicon {
						width: 52.38rpx;
						height: 45.83rpx;
					}

					&__tx {
						width: 65rpx;
						height: 65rpx;
						background: #616161;
						border-radius: 50%;
					}

					&__username {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #868686;
						line-height: 27rpx;
						margin-left: 17rpx;
						width: 300rpx;
					}

					&__time {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 27rpx;
						color: #ABABAB;
						line-height: 27rpx;
					}

					&__title {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 29rpx;
						color: #2E2E2E;
						line-height: 29rpx;
						margin-top: 26rpx;
						margin-bottom: 22rpx;
					}

					&__text {
						width: 610.71rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 29rpx;
						color: #2E2E2E;
						line-height: 38rpx;
						margin-bottom: 19rpx;
					}

					&__pic {
						width: 45%;
						height: 180rpx;
						background: #C6CACD;
						border-radius: 10rpx;
						margin-bottom: 15rpx;
						margin-right: 20rpx;
					}

					&__pic1 {
						width: 33%;
						height: 180rpx;
						background: #616161;
						border-radius: 10rpx;
						margin-bottom: 15rpx;
						margin-right: 0;
					}

					&__ht {
						padding: 0 20rpx 0 16rpx;
						height: 49rpx;
						background: #F5F6F8;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 23rpx;
						color: #656565;
						line-height: 15rpx;

						&__icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 12rpx;
						}
					}

					&__tip {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 23rpx;
						color: #909398;
						line-height: 23rpx;
						margin-left: 43rpx;
					}
				}
			}
		}
	}
</style>